<template>
  <div class="com-fa">
    <ul class="com-son">
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
      <li><img src="../../../../assets/img/shopping.jpg" alt=""></li>
    </ul>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.com-fa {
  width: 80%;
  height: 100%;
}

.com-son {
  display: flex;
  flex-wrap: wrap;
}

.com-son li {
  list-style-type: none;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.com-son li img {
  width: 200px;
  height: 340px;
}
</style>
